<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
          <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

        </el-breadcrumb>
        <el-button @click="insertPayment" style="text-align: left;">新增</el-button>
        <el-dropdown>
          <span style="cursor: pointer">{{$store.state.empName}}<i class="el-icon-arrow-down "  style=" cursor: pointer" ></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-main>
          <el-table :data="page.records" border>
            <el-table-column prop="paymentId" label="缴费编号" ></el-table-column>
            <el-table-column prop="studentId" label="学员编号"></el-table-column>
            <el-table-column prop="pmTypeId" label="缴费项目信息编号" ></el-table-column>
            <el-table-column prop="paymentMoney" label="缴费金额" ></el-table-column>
            <el-table-column prop="paymentTime" label="缴费时间" ></el-table-column>
            <el-table-column prop="isPeriodization" label="是否分期" >
              <template slot-scope="scope">
                <span>{{showisPeriodization(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="paymentMode" label="付款方式" >
              <template slot-scope="scope">
                <span>{{showpaymentMode(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="preparedBy" label="制单人" ></el-table-column>
            <el-table-column prop="remarks" label="备注" ></el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <a href="#" @click="updatePayment(scope.row)">修改</a>
                <a href="#" @click="deletePayment(scope.row)">删除</a>
              </template>
            </el-table-column>
          </el-table>
          <!--      分页控件-->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="[5, 8, 10, 12]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </el-main>
        <!--      添加或修改缴费项目信息-->
        <el-dialog
          title="操作学员缴费信息"
          :visible.sync="insertPaymentDialogVisible"
          width="50%"
          :before-close="handleClose">
          <div id="studentChangeForm">
            <span v-if="paytion.paymentId!=null">缴费编号</span>
            <el-input v-model="paytion.paymentId" placeholder="缴费编号" v-if="paytion.paymentId!=null" style="width: 220px"></el-input><br>
            <span>学员编号</span>
            <el-input v-model="paytion.studentId" placeholder="学员编号" style="width: 220px"></el-input><br>
            <span>缴费项目信息编号</span>
            <el-input v-model="paytion.pmTypeId" placeholder="缴费项目信息编号" style="width: 220px"></el-input><br>
            <span>缴费金额</span>
            <el-input v-model="paytion.paymentMoney" placeholder="缴费金额" style="width: 220px"></el-input><br>
            <div class="block" >
              <span class="demonstration">缴费时间</span>
              <el-date-picker
                v-model="paytion.paymentTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <span>是否分期</span>
            <el-radio v-model="paytion.isPeriodization" label="0" style="width: 120px">是</el-radio>
            <el-radio v-model="paytion.isPeriodization" label="1">否</el-radio>
            <br>
            <span>付款方式</span>
            <el-select v-model="paytion.paymentMode" placeholder="请选择缴费方式">
              <el-option label="微信支付" value="1">微信支付</el-option>
              <el-option label="支付宝支付" value="2">支付宝支付</el-option>
              <el-option label="银行卡支付" value="3">银行卡支付</el-option>
              <el-option label="现金支付" value="4">现金支付</el-option>
            </el-select>
            <br>
            <span>制单人</span>
            <el-input v-model="paytion.preparedBy" placeholder="制单人" style="width: 220px"></el-input><br>
            <span>备注</span>
            <el-input v-model="paytion.remarks" placeholder="备注" style="width: 220px"></el-input><br>
          </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="paymentDialogCancel">取 消</el-button>
        <el-button type="primary" @click="paymentDialogCommit">确 定</el-button>
      </span>
        </el-dialog>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import instance from "../../utils/request";//引入axios实例
export default {
  name: "Payment",
  data(){
    return {
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      paytion:{},
      insertPaymentDialogVisible: false
    }
  },
  methods:{
    showisPeriodization(row,column){
      let isPeriodization='';
      if (row.isPeriodization==0){
        isPeriodization='是';
      }else if(row.isPeriodization==1) {
        isPeriodization='否';
      }
      return isPeriodization;
    },
    showpaymentMode(row,column){
      let paymentMode='';
      switch (row.paymentMode){
        case 1:
          return '微信支付'
        case 2:
          return '支付宝支付'
        case 3:
          return '银行卡支付'
        case 4:
          return '现金支付'
      }
      return paymentMode;
    },
    updatePayment(row){
      this.paytion.paymentId = row.paymentId;
      instance.get("/payment/"+row.paymentId).then(res=>{
        this.paytion = res.data;
      });
      this.insertPaymentDialogVisible = true;
    },
    deletePayment(row){
      instance.delete("/payment/"+row.paymentId).then(res=>{
        if (res.data>0){
          this.$message("删除学生成功!");
          this.selectAll();
          this.$router.push({name:'Payment'});
        }else {
          this.$message("删除学生失败!");
        }
      });
      this.selectAll();
    },
    insertPayment(){
      this.paytion = {};
      this.insertPaymentDialogVisible = true;
    },
    paymentDialogCancel(){
      this.$message("已取消!");
      this.paytion = {};//清空表单
      this.insertPaymentDialogVisible = false;//隐藏弹出窗
    },
    paymentDialogCommit(){//添加或修改学员缴费信息
      instance.post("/payment",this.paytion).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("操作成功!");
          this.paytion = {};//清空表单
          this.insertPaymentDialogVisible = false;//隐藏弹出窗
          this.selectAll();//重新加载学生信息
        }else {
          this.$message("操作失败!");
          this.paytion = {};//清空表单
          this.insertPaymentDialogVisible = false;//隐藏弹出窗
          this.selectAll();//重新加载学生信息
          // location.reload();
        }
      });
      this.selectAll();
    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      instance.get("/payment/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
        this.selectAll();
        this.$router.push({name:'Payment'});
      });
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      instance.get("/payment/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
        this.selectAll();
        this.$router.push({name:'Payment'});
      });
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    selectAll(){
      //获取所有学生信息分页形式
      instance.get("/payment/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page = res.data;//查询数据并赋值
        console.log(this.page);

      });
    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    }
  },
  created() {
    this.selectAll();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
